<template>
  <a-modal
    v-model:visible="visible"
    :title="modalTitle"
    :width="modalWidth"
    :maskClosable="false"
    :destroyOnClose="true"
    wrapClassName="custom-modal min-base-modal"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form
      ref="formRef"
      inline
      :model="formData"
      :rules="rules"
      v-bind="formItemLayout"
    >
      <a-form-item label="摄像机名称" name="name" required>
        <a-input
          v-model:value="formData.name"
          placeholder="请输入摄像机名称"
          maxLength="20"
        />
      </a-form-item>
      <a-form-item label="摄像机ID" name="modelCameraId" required>
        <a-input
          v-model:value="formData.modelCameraId"
          placeholder="请输入摄像机ID"
        />
      </a-form-item>
      <a-form-item label="摄像机类型" name="type" required>
        <a-select
          v-model:value="formData.type"
          allow-clear
          placeholder="请选择摄像机类型"
          :options="selectList"
        />
      </a-form-item>
    </a-form>

    <template #footer>
      <a-button class="cancel" @click="handleCancel">取消</a-button>
      <a-button
        key="submit"
        type="submit"
        :loading="loading"
        @click="handleOk"
        class="common-buttom"
      >
        确认
      </a-button>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { message } from 'ant-design-vue'
import type { Rule } from 'ant-design-vue/es/form'

import { cameraEdit } from './serve.api'

const emit = defineEmits(['isOk'])

defineProps({
  selectList: {
    type: Array,
    default: () => []
  }
})

const visible = ref<boolean>(false)
const loading = ref<boolean>(false)

const modalTitle = ref('')
const modalType = ref('')
const modalWidth = ref('')
const modalData = ref({})

const formState = ref({})

const formRef = ref()
const formData = reactive({
  id: '',
  name: '',
  modelCameraId: '',
  type: undefined
})

const formItemLayout = {
  labelCol: { span: 7 },
  wrapperCol: { span: 24 }
}

const rules: Record<string, Rule[]> = {
  // apiAddress: [
  //   {
  //     trigger: 'change'
  //   },
  //   {
  //     validator: validateUrl,
  //     trigger: 'change'
  //   },
  //   {
  //     min: 1,
  //     max: 100,
  //     message: '长度不能大于100',
  //     trigger: 'change'
  //   }
  // ]
  // json: [{ required: true, validator: validateJson, trigger: 'change' }]
}

const showModal = (type: string, data?: any) => {
  visible.value = true
  modalType.value = type
  modalData.value = data

  switch (type) {
    case 'add':
      modalTitle.value = ''
      modalWidth.value = '42.25rem'
      formState.value = {}
      break
    case 'edit':
      modalTitle.value = '编辑摄像机'
      modalWidth.value = '32.25rem'
      formState.value = data
      formData.id = data.id
      formData.name = data.name
      formData.modelCameraId = data.modelCameraId
      formData.type = data.type
      break
    case 'delete':
      modalTitle.value = ''
      modalWidth.value = '26.25rem'
      break
    default:
      break
  }
}

const handleOk = async () => {
  try {
    await formRef.value.validateFields()
    if (modalType.value === 'edit') {
      editFun()
    } else {
      message.error('表单填写不完整，请检查！')
    }
  } catch (error) {
    console.log('Failed:', error)
  }
}

// 编辑
const editFun = () => {
  loading.value = true

  cameraEdit({
    id: formData.id,
    name: formData.name,
    modelCameraId: formData.modelCameraId,
    type: formData.type
  })
    .then(() => {
      message.success('修改成功')
      emit('isOk')
      handleCancel()
      loading.value = false
      visible.value = false
    })
    .catch(() => {
      loading.value = false
    })
}

// 取消
const handleCancel = () => {
  visible.value = false
  // formRef.value?.resetFields()
}

defineExpose({ showModal })
</script>
